<!DOCTYPE html>
<html>

<head>
    <title>TRTC实时音视频通话</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no, shrink-to-fit=no">
    <link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/room.css">
</head>

<body>
    <div id="root">
        <!-- 登录页面 -->
        <div id="login-root">
            <!-- 登录卡片 -->
            <div id="login-card" class="card">
                <!-- 顶部三个蓝条 -->
                <div class="row-div" style="width: 100%; height: 10px">
                    <div style="width: 190px; height: 100%; background-color: #006EFF"></div>
                    <div style="width: 160px; height: 100%; background-color: #00A4FF"></div>
                    <div style="width: 100px; height: 100%; background-color: #5AD5E0"></div>
                </div>
                <!-- 腾讯云logo -->
                <div class="row-div" style="width: 100%; height: 100px; justify-content: center">
                    <img style="height: 23px" src="./img/logo.png" alt="">
                    <div style="width: 9px"></div>
                    <div style="width: 1px; height: 10px; background-color: #D8D8D8"></div>
                    <div style="width: 9px"></div>
                    <div style="width: 86px; height: 23px; font-size: 18px; color: #333333">视频通话</div>
                </div>
                <!-- 用户名 房间号 登录按钮-->
                <div class="col-div" style="width: 320px">
                    <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px">
                        <label for="userId" class="bmd-label-floating">用户名:</label>
                        <input type="text" class="form-control" name="userId" id="userId" maxlength="18">
                    </div>
                    <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px">
                        <label for="roomId" class="bmd-label-floating">房间号:</label>
                        <input type="text" class="form-control" name="roomId" id="roomId" maxlength="18">
                    </div>
                    <div style="height: 24px"></div>
                    <!-- 登录 -->
                    <button id="login-btn" type="button" class="btn btn-raised btn-primary"
                        style="width: 100%; height: 40px">进入房间
                        <div class="ripple-container"></div>
                    </button>
                    <!-- 摄像头 麦克风 -->
                    <div class="row-div" style="width: 100%; height: 105px; justify-content: center">
                        <img id="camera" style="height: 27px" src="./img/camera.png" onClick="event.cancelBubble = true"
                            data-toggle="popover" data-placement="top" title="" data-content="">
                        <!-- 选择摄像头 -->
                        <div id="camera-option" style="display: none"></div>
                        <div style="width: 100px"></div>
                        <img id="microphone" style="height: 27px" src="./img/mic.png"
                            onClick="event.cancelBubble = true" data-toggle="popover" data-placement="top" title=""
                            data-content="">
                        <!-- 选择麦克风 -->
                        <div id="mic-option" style="display: none"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 聊天室页面 -->
        <div id="room-root" class="col-div">
            <!-- header -->
            <div class="row-div card" style="width: 100%; height: 65px; justify-content: space-between">
                <!-- 腾讯云logo -->
                <div class="row-div" style="height: 100%; width: 230px; justify-content: center">
                    <img style="height: 23px" src="./img/logo.png" alt="">
                    <div style="width: 9px"></div>
                    <div style="width: 1px; height: 10px; background-color: #D8D8D8"></div>
                    <div style="width: 9px"></div>
                    <div style="width: 86px; height: 23px; font-size: 18px; color: #333333">视频通话</div>
                </div>
                <!-- 分享屏幕 退出 按钮 -->
                <div class="row-div" style="height: 100%; width: auto;">
                    <img id="screen-btn" style="width: 65px; height: 65px" src="./img/screen-off.png" alt="">
                    <div style="width: 20px"></div>
                    <img id="logout-btn" style="width: 65px; height: 65px" src="./img/logout.png" alt="">
                </div>
                <!-- 房间号 -->
                <div id="header-roomId"
                    style="width: 230px; justify-content: flex-end; padding-right: 20px; font-size: 14px; color: #888888">
                    房间号: 12345</div>
            </div>
            <!-- content -->
            <div class="row-div" style="height: 100%; width: 100%; padding: 10px">
                <div class="col-div" style="width: 340px; height: 100%; padding: 10px">
                    <div class="col-div card" style="width: 100%; height: 100%">
                        <!-- 成员列表 -->
                        <div id="member-list" class="col-div" style="width: 100%; justify-content: flex-start; flex: 1">
                            <!-- member -->
                            <div id="member-me" style="width: 100%; padding-left: 20px">
                                <div class="row-div member"
                                    style="width: 100%; height: 50px; justify-content: space-between">
                                    <div class="member-id">(我)</div>
                                    <div class="row-div" style="width:100px; height: 27px; justify-content: center">
                                        <img class="member-video-btn" style="height: 100%" src="./img/camera-on.png"
                                            alt="">
                                        <div style="width: 18px"></div>
                                        <img class="member-audio-btn" style="height: 100%" src="./img/mic-on.png"
                                            alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 广告 -->
                        <div class="col-div" style="width: 100%; height: 244px">
                            <div style="width: 280px; height: 1px; background-color: #f0f0f0"></div>
                            <div class="row-div" style="width: 100%; height: 186px; justify-content: center">
                                <img style="height: 150px" src="./img/code.jpg" alt="">
                                <div style="width: 46px"></div>
                                <img style="height: 150px" src="./img/shot.png" alt="">
                            </div>
                            <div style="width: 290px; font-size: 14px; color: #888888">微信扫一扫打开小程序，点击“视频通话”即可加入通话
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 视频网格 -->
                <div id="video-grid" style="height: 100%; flex: 1">
                    <!-- 主视频 -->
                    <div id="main-video" class="video-box col-div" style="justify-content: flex-end">
                        <!-- 主视频控制按钮 -->
                        <div id="main-video-btns" class="row-div"
                            style="width: 156px; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
                            <img id="video-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
                                src="./img/big-camera-on.png" alt="" title="关闭摄像头">
                            <img id="mic-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
                                src="./img/big-mic-on.png" alt="" title="关闭麦克风">
                        </div>
                        <div id="mask_main" class="mask col-div">
                            <!-- “摄像头未开启”遮罩 -->
                            <div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8"></div>
                            <img style="width: 63px; height: 69px; z-index: 10;" src="./img/camera-max.png" alt="">
                            <div style="height: 10px"></div>
                            <div style="z-index: 10">摄像头未打开</div>
                        </div>
                    </div>
                    <!-- 小视频 -->
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/popper.js"></script>
    <script src="./js/bootstrap-material-design.js"></script>
    <script>
        $(document).ready(function () {
            $('body').bootstrapMaterialDesign();
        });
    </script>
    <script src="./js/lib-generate-test-usersig.min.js"></script>
    <script src="./js/debug/GenerateTestUserSig.js"></script>
    <script src="./js/trtc.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/rtc-client.js"></script>
    <script src="./js/share-client.js"></script>
    <script src="./js/presetting.js"></script>
    <script src="./js/index.js"></script>
    
</body>

</html>